<template>
  <div class="mainPage">
    <div class="mainTop clearfix">
      <div class="item item1">
        <div class="init">
          <div>当日采购订单</div>
          <div>
            数量：<span>{{ orderList.daily_purchase_order_total }}个</span>
          </div>
          <div>
            金额：<span>￥{{ orderList.daily_purchase_order_amount | formatMoney(2) }}</span>
          </div>
        </div>
      </div>
      <div class="item item2">
        <div class="init">
          <div>合计采购订单</div>
          <div>
            数量：<span>{{ orderList.count_purchase_order_total }}个</span>
          </div>
          <div>
            金额：<span>￥{{ orderList.count_purchase_order_amount | formatMoney(2) }}</span>
          </div>
        </div>
      </div>
      <div class="item item3">
        <div class="init">
          <div>当日销售订单</div>
          <div>
            数量：<span>{{ orderList.daily_sale_order_total }}个</span>
          </div>
          <div>
            金额：<span>￥{{ orderList.daily_sale_order_amount | formatMoney(2) }}</span>
          </div>
        </div>
      </div>
      <div class="item item4">
        <div class="init">
          <div>合计销售订单</div>
          <div>
            数量：<span>{{ orderList.count_sale_order_total }}个</span>
          </div>
          <div>
            金额：<span>￥{{ orderList.count_sale_order_amount | formatMoney(2) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="notice">
     <div class="noticeitem" style="margin-right:20px;">
       <div class="title">
          通知公告
       </div>
       <div class="noticeContent">
         <div  class="noticeImg" v-if="noticeList.length == 0">
           <img  src="../assets/images/tableNoData.png" />
         </div>
         <ul v-if="noticeList.length != 0">
           <li @click="lookInfo(item)" v-for="(item,index) in noticeList" :key="index">
             <span class="spot"></span>
             <span class="status">
               <img v-if="item.read_state == 0" src="../assets/images/redNotice.png" alt="">
               <img v-if="item.read_state == 1" src="../assets/images/bluNotice.png" alt="">
             </span>
             <div class="top" v-if="item.title.length >= 26">
               <Poptip  trigger="hover" placement="top-start"  :content="item.title">
                   <p>{{item.title}}</p>
               </Poptip>
             </div>
               <p v-else>{{item.title}}</p>
             <div class="rightText">
                          <span class="info">{{item.user_name}}</span>
                         <span class="info">{{item.create_time}}</span>
             </div>
           </li>
         </ul>
       </div>
     </div>
      <div class="noticeitem">
       <div class="title">
          文件下载
       </div>
        <div class="noticeContent">
          <div  class="noticeImg" v-if="fileList.length == 0">
           <img  src="../assets/images/tableNoData.png" />
         </div>
         <ul v-if="fileList.length != 0">
           <li v-for="(item,index) in fileList" :key="index" @click="downFile(item)">
             <span class="spot" style="margin-right: 15px"></span>
              <div class="top" v-if="item.title.length >= 26">
               <Poptip  trigger="hover" placement="top-start"  :content="item.title">
                   <p>{{item.title}}</p>
               </Poptip>
             </div>
               <p v-else>{{item.title}}</p>
             <div class="rightText">
                          <span class="info">{{item.user_name}}</span>
                         <span class="info">{{item.create_time}}</span>
                         <span  style="margin-left:10px;margin-right:10px;"><img src="../assets/images/down.png" alt=""></span>
             </div>
           </li>
         </ul>
       </div>
     </div>
    </div>
    <div class="mainMid">
      <div class="title">待办事项</div>
      <ul class="clearfix">
        <li v-for="(item, index) in navList" :key="index">
          <div class="initDiv">
            <div class="liTop clearfix">
              <img :src="item.img" class="fl" />
              <div class="fl num">
                <div>{{ item.title }}</div>
                <div>
                  <span>待办事项：</span><span>{{ item.num }}条</span>
                </div>
              </div>
            </div>
            <div class="liBtm">
              <span :style="{ background: item.btnColor, cursor: 'pointer' }" @click="goView(item.pushUrl)">立即查看</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="echartDiv">
      <div class="echartfl echart1">
        <div id="option1" style="width: 100%; height: 100%;"></div>
      </div>
      <div class="echartfl">
        <div id="option2" style="width: 100%; height: 100%;"></div>
      </div>
    </div>
    <div class="listDiv">
      <div class="title">系统预警</div>
      <Table :productList="listColumns" :productData="listData" :isLoad="isLoad"></Table>
    </div>
    <Modal v-model="fristComingStatus" label-position="left" title="请选择公司类型" width="505" class-name="vertical-center-modal">
      <div v-if="fristComingStatus" style="height: 190px;">
        <span style="margin-right: 12px; float: left; color: #000;">请选择公司类型：</span>
        <RadioGroup v-model="factoryType" class="fl">
          <Radio label="1">经销商</Radio>
          <Radio label="2" style="margin-left: 23px;">境内厂家直销</Radio>
        </RadioGroup>
      </div>
      <div slot="footer">
        <span class="longTextBtn btnSure finger" @click="fristComingStatus = false">下一步</span>
      </div>
    </Modal>
    <Modal v-model="fristFactoryStatus" label-position="left" title="请选择厂家类型" width="505" class-name="vertical-center-modal">
      <div v-if="fristFactoryStatus" style="height: 190px;">
        <span style="margin-right: 12px; float: left; color: #000;">请选择厂家类型：</span>
        <RadioGroup v-model="comType" class="fl">
          <Radio label="1">境内厂家</Radio>
          <Radio label="2" style="margin-left: 23px;">境外厂家</Radio>
        </RadioGroup>
      </div>
    </Modal>
    <Modal v-model="commonTableStatus" label-position="left" :title="title" width="80" :footer-hide="true" class="warnModel">
      <div v-if="commonTableStatus">
        <Table :productList="commonTableColumns" :productData="commonTableData" :isLoad="isLoad" height="550"></Table>
        <div class="changepageList">
          <Page :total="Listtotal" @on-change="changeListpage" />
          <span class="longTextBtn finger btnAdd marginbot20 btncolor" @click="Export">导出</span>
        </div>
        
      </div>
    </Modal>
    <Modal v-model="zhuceTableStatus" label-position="left" :title="title" width="80" :footer-hide="true" class="warnModel">
      <div v-if="zhuceTableStatus">
        <Table :productList="zhuceTableColumns" :productData="zhuceTableData" :isLoad="isLoad" height="550"></Table>
        <div class="changepageList">
          <Page :total="Listtotal2" @on-change="changeListpage" />
          <span class="longTextBtn finger btnAdd marginbot20 btncolor" @click="Export">导出</span>
        </div>
      </div>
    </Modal>
    <Modal v-model="ProductValidityTablestatus" label-position="left" :title="title" width="80" :footer-hide="true" class="warnModel">
      <div v-if="ProductValidityTablestatus">
        <Table :productList="ProductValidityColumns" :productData="ProductValidityTableData" :isLoad="isLoad" height="550"></Table>
        <div class="changepageList">
          <Page :total="Listtotal3" @on-change="changeListpage" />
          <span class="longTextBtn finger btnAdd marginbot20 btncolor" @click="Export">导出</span>
        </div>
      </div>
    </Modal>
    <!-- ProductValidityTablestatus -->
    <!-- 禁用模态框 -->
    <Modal v-model="turnNoModel" label-position="left" width="400" :footer-hide="true" :closable="false" class-name="vertical-center-modal">
      <div class="reviewDiv">
        <p>是否确认禁用？</p>
        <div>
          <span class="pageBtn finger btnSure" @click="turnNo">确定</span>
          <span class="pageBtn finger btnCancle" @click="turnNoModel = false">取消</span>
        </div>
      </div>
    </Modal>

    <Modal v-model="changePwdStat" title="修改密码" :closable="false" :mask-closable="false">
      <div class="marginbot20">(为了保证账号安全，请先修改密码)</div>
      <div class="clearfix changePwd">
        <div class="item">
          <span>当前密码：</span>
          <i-input v-model="postData.oldPwd" placeholder="请输入" class="iviewIptWidth250" type="password"></i-input>
        </div>
        <div class="item">
          <span>修改密码：</span>
          <i-input v-model="postData.changePwd" placeholder="请输入" class="iviewIptWidth250" type="password"></i-input>
        </div>
        <div class="item">
          <span>确认密码：</span>
          <i-input v-model="postData.surePwd" placeholder="请输入" class="iviewIptWidth250" type="password"></i-input>
        </div>
      </div>
      <div slot="footer">
        <span class="pageBtn finger btnSure" @click="sure"> 确定 </span>
      </div>
    </Modal>
            <!-- 通知公告弹窗 -->
        <Modal v-model="noticeStatus" title="通知公告" width="1000" :closable="false" :mask-closable="false">
            <div class="noticeTitle">
                <span class="sp1">标题：</span>
                <span class="sp2">{{NoticeInfo.title}}</span>
            </div>
            <div class="noticeTitle">
                <span class="sp1">内容：</span>
                <div id="notice" class="ql-editor infoContent" >

                </div>
            </div>
            <div slot="footer">
                <span class="pageBtn finger btnSure" @click="noticeStatus = false"> 确定 </span>
            </div>
        </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Table from '@/components/table'
import echarts from 'echarts'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
let tableTitle = ''
let that = null
export default {
  name: 'supplierManage',
  components: {
    Table,
  },
  data() {
    return {
      fileList: [],
      noticeList: [],
      noticeStatus: false,
      ExportTilte: '',
      warningType: '',
      ProductValidityTablestatus: false,
      Listtotal3: 0,
      changepage2: 1,
      Listtotal2: 0,
      changepage: 1,
      Listtotal: 0,
      changePwdStat: false,
      postData: {
        oldPwd: '',
        changePwd: '',
        surePwd: '',
      },
      zoomLeft: 20,
      zoomRitht: 16,
      comType: '1',
      factoryType: '1',
      fristComingStatus: false,
      fristFactoryStatus: false,
      commonTableStatus: false, // 一般预警table弹窗
      zhuceTableStatus: false, // 注册
      clickTableType: '',
      title: '', // 弹窗标题
      isLoad: false,
      total: 0,
      orderList: {}, // 订单列表
      factory_id: 0, // 厂家id
      supplier_id: 0, // 供应商id
      review_id: 0, // 产品id
      no: 0, // 预警id
      turnNoModel: false, // 禁用模态框
      pages: {
        page: 1,
        rows: 1000,
      },
      listData: [
        {
          name: '营业执照效期预警',
          type: 1,
          title: '营业执照',
          num: 5,
        },
        {
          name: '经营许可证有效预警',
          type: 2,
          title: '经营许可证',
          num: 4,
        },
        {
          name: '生产许可证效期预警',
          type: 3,
          title: '生产许可证',
          num: 3,
        },
        {
          name: '备案凭证效期预警',
          type: 4,
          title: '备案凭证',
          num: 2,
        },
        {
          name: '委托书效期预警',
          type: 5,
          title: '委托书',
          num: 1,
        },
        {
          name: '注册证效期预警',
          type: 6,
          title: '注册证',
          num: 155,
        },
        {
          name: '库存下限预警',
          title: '',
          num: 1,
        },
      ],
      listColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 80,
        },
        {
          title: '预警类别',
          key: 'warningType',
          align: 'center',
        },
        {
          title: '预警数量',
          key: 'count',
          align: 'center',
          render: (h, param) => {
            return h('div', [
              h(
                'span',
                {
                  /* style: {
                    color: '#F63939',
                    fontSize: '14px',
                    cursor: 'pointer',
                  }, */
                  class: 'tableWarn',
                  on: {
                    click: () => {
                      this.changepage = 1
                      this.clickNum(param.row)
                      this.warningType = param.row.no
                      this.ExportTilte = param.row.warningType
                    },
                  },
                },
                param.row.count
              ),
            ])
          },
        },
      ],
      navList: [
        {
          title: '采购申请单审核',
          btnColor: '#8792F2',
          num: 0,
          img: require('../assets/images/mainMid5.png'),
          pushUrl: '/purchaseRequisition?show=true',
        },
        {
          title: '销售申请单审核',
          btnColor: '#59DEBC',
          num: 0,
          img: require('../assets/images/mainMid1.png'),
          pushUrl: '/salesApplication?show=true',
        },
        // {
        //   title: '用量表审核',
        //   btnColor: '#6BC7FF',
        //   num: 1,
        //   img: require('../assets/images/mainMid2.png'),
        //   pushUrl: '/customerScale?show=true',
        // },
        {
          title: '供应商审核',
          btnColor: '#FFBC83',
          num: 0,
          img: require('../assets/images/mainMid3.png'),
          pushUrl: '/factoryManage?show=true',
        },
        {
          title: '产品审核',
          btnColor: '#FFA2A2',
          num: 0,
          img: require('../assets/images/mainMid4.png'),
          pushUrl: '/productManage?show=true',
        },
        {
          title: '采购未完成',
          btnColor: '#E9A2E5',
          num: 0,
          img: require('../assets/images/mainMid6.png'),
          pushUrl: '/purchaseOrder?select=true',
        },
        {
          title: '销售未完成',
          btnColor: '#7BAEFF',
          num: 0,
          img: require('../assets/images/mainMid7.png'),
          pushUrl: '/salesOrder?select=true',
        },
        {
          title: '产品字典变更',
          btnColor: '#4AD4D8',
          num: 0,
          img: require('../assets/images/mainMid8.png'),
          pushUrl: '/dataDictionary?select=true',
        },
      ],
      options1: null,
      options2: null,
      commonTableColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 75,
        },
        {
          title: '公司编号',
          key: 'code',
          align: 'center',
          minWidth: 130,
        },
        {
          title: '公司名称',
          key: 'obj_name',
          align: 'center',
          render(h, param) {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    that.commonTableStatus = false
                    if (param.row.factory_id) {
                      that.$router.push({
                        path: '/manufacturerManage',
                        query: {
                          subfactory_id: param.row.factory_id,
                          status: 1,
                        },
                      })
                    }
                    if (param.row.supplier_id) {
                      that.$router.push({
                        path: '/firstCampApproval',
                        query: {
                          supplier_id: param.row.supplier_id,
                          is_readonly: 1,
                        },
                      })
                    }
                    if (param.row.distributor_id) {
                      that.$router.push({
                        path: '/clientManageAgentFrame',
                        query: {
                          id: param.row.distributor_id,
                        },
                      })
                    }
                  },
                },
              },
              param.row.obj_name
            )
          },
          minWidth: 260,
        },
        {
          title: '有效期',
          key: 'obj_time',
          align: 'center',
          minWidth: 140,
          renderHeader: (h, column) => {
            return h('div', [
              h(
                'span',
                {
                  style: {
                    cursor: 'pointer',
                  },
                },
                tableTitle
              ),
            ])
          },
        },
        {
          title: '近效期天数',
          key: 'days',
          align: 'center',
          minWidth: 140,
        },
        {
          title: '状态',
          align: 'center',
          minWidth: 90,
          render: (h, param) => {
            if (param.row.status == '近效期') {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#FF9C3F',
                      fontSize: '14px',
                    }, */
                    class: 'learDate',
                  },
                  '近效期'
                ),
              ])
            } else {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#EF5656',
                      fontSize: '14px',
                    }, */
                    class: 'oldDate',
                  },
                  '过期'
                ),
              ])
            }
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, param) => {
            if (param.row.status == '近效期') {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#389AFC',
                      fontSize: '14px',
                      cursor: 'pointer',
                    }, */
                    class: 'tableFont',
                    on: {
                      click: () => {
                        that.turnNoModel = true
                        if (param.row.factory_id) {
                          that.factory_id = param.row.factory_id
                        }
                        if (param.row.supplier_id) {
                          that.supplier_id = param.row.supplier_id
                        }
                      },
                    },
                  },
                  '禁用'
                ),
                h(
                  'span',
                  {
                    style: {
                      /* color: '#389AFC',
                      fontSize: '14px',
                      cursor: 'pointer', */
                      marginLeft: '30px',
                    },
                    class: 'tableFont',
                    on: {
                      click: () => {
                        this.output()
                      },
                    },
                  },
                  '导出审批表'
                ),
              ])
            } else {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#389AFC',
                      fontSize: '14px',
                      cursor: 'pointer',
                    }, */
                    class: 'tableFont',
                    on: {
                      click: () => {
                        that.turnNoModel = true
                        if (param.row.factory_id) {
                          that.factory_id = param.row.factory_id
                        }
                        if (param.row.supplier_id) {
                          that.supplier_id = param.row.supplier_id
                        }
                      },
                    },
                  },
                  '禁用'
                ),
              ])
            }
          },
          minWidth: 220,
        },
      ],
      commonTableData: [
        {
          type: 1,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          time: '2020-09-09',
          day: '70',
        },
        {
          type: 2,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          time: '2020-09-09',
          day: '70',
        },
      ],
      zhuceTableColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          minWidth: 75,
        },
        {
          title: '产品编号',
          key: 'product_model_code',
          align: 'center',
          minWidth: 160,
        },
        {
          title: '产品名称',
          key: 'name',
          align: 'center',
          minWidth: 180,
          render(h, param) {
            return h(
              'a',
              {
                /* style: {
                  color: '#389AFC',
                  fontSize: '14px',
                  cursor: 'pointer',
                }, */
                class: 'tableFont',
                on: {
                  click: () => {
                    that.zhuceTableStatus = false
                    that.$router.push({
                      path: '/productFrame',
                      query: {
                        reviewId: param.row.review_id,
                      },
                    })
                  },
                },
              },
              param.row.name
            )
          },
        },
        {
          title: '注册证号',
          key: 'licence_code',
          align: 'center',
          minWidth: 170,
        },
        {
          title: '生产厂家',
          key: 'factory_name',
          align: 'center',
          minWidth: 285,
        },
        {
          title: '注册证有效期',
          key: 'end_time',
          align: 'center',
          minWidth: 165,
        },
        {
          title: '近效期天数',
          key: 'days',
          align: 'center',
          minWidth: 145,
        },
        {
          title: '状态',
          align: 'center',
          minWidth: 85,
          render: (h, param) => {
            if (param.row.status == '近效期') {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#FF9C3F',
                      fontSize: '14px',
                    }, */
                    class: 'learDate',
                  },
                  '近效期'
                ),
              ])
            } else {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#EF5656',
                      fontSize: '14px',
                    }, */
                    class: 'oldDate',
                  },
                  '过期'
                ),
              ])
            }
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, param) => {
            if (param.row.status == '近效期') {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#389AFC',
                      fontSize: '14px',
                      cursor: 'pointer',
                    }, */
                    class: 'tableFont',
                    on: {
                      click: () => {
                        that.turnNoModel = true
                        that.review_id = param.row.review_id
                      },
                    },
                  },
                  '禁用'
                ),
                h(
                  'span',
                  {
                    style: {
                      /* color: '#389AFC',
                      fontSize: '14px',
                      cursor: 'pointer', */
                      marginLeft: '30px',
                    },
                    class: 'tableFont',
                    on: {
                      click: () => {
                        this.output()
                      },
                    },
                  },
                  '导出审批表'
                ),
              ])
            } else {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#389AFC',
                      fontSize: '14px',
                      cursor: 'pointer',
                    }, */
                    class: 'tableFont',
                    on: {
                      click: () => {
                        that.turnNoModel = true
                        that.review_id = param.row.review_id
                      },
                    },
                  },
                  '禁用'
                ),
              ])
            }
          },
          minWidth: 220,
        },
      ],
      ProductValidityTableData: [],
      ProductValidityColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          minWidth: 75,
        },
        {
          title: '产品编号',
          key: 'product_model_code',
          align: 'center',
          minWidth: 160,
        },
        {
          title: '产品名称',
          key: 'product_name',
          align: 'center',
          minWidth: 220,
          render(h, param) {
            return h(
              'a',
              {
                /* style: {
                  color: '#389AFC',
                  fontSize: '14px',
                  cursor: 'pointer',
                }, */
                class: 'tableFont',
                on: {
                  click: () => {
                    // that.ProductValidityTablestatus = false
                    // that.$router.push({
                    //   path: '/productFrame',
                    //   query: {
                    //     reviewId: param.row.id,
                    //   },
                    // })
                  },
                },
              },
              param.row.product_name
            )
          },
        },
        {
          title: '注册证号',
          key: 'licence_code',
          align: 'center',
          minWidth: 170,
        },
        // serial_number
        {
          title: '规格型号',
          key: 'model_name',
          align: 'center',
          minWidth: 120,
        },
        {
          title: '批号',
          key: 'batch_number',
          align: 'center',
          minWidth: 170,
        },
        {
          title: '序列号',
          key: 'serial_number',
          align: 'center',
          minWidth: 120,
        },
        {
          title: '生产厂家',
          key: 'factory_name',
          align: 'center',
          minWidth: 225,
          render: (h, param) => {
            return h('div', [
              h(
                'div',
                {
                  class: 'TextAlign_lf',
                },
                param.row.factory_name
              ),
            ])
          },
        },
        {
          title: '供应商',
          key: 'supplier_name',
          align: 'center',
          minWidth: 300,
          render: (h, param) => {
            return h('div', [
              h(
                'div',
                {
                  class: 'TextAlign_lf',
                },
                param.row.supplier_name
              ),
            ])
          },
        },
        // supplier_name
        {
          title: '生产日期',
          key: 'production_date',
          align: 'center',
          minWidth: 165,
        },
        {
          title: '有效期',
          key: 'valid_period',
          align: 'center',
          minWidth: 165,
        },
        // {
        //   title: '注册证有效期',
        //   key: 'end_time',
        //   align: 'center',
        //   minWidth: 165,
        // },
        {
          title: '近效期天数',
          key: 'days',
          align: 'center',
          minWidth: 145,
        },
        {
          title: '数量',
          key: 'inventory_quantity',
          align: 'center',
          minWidth: 145,
        },
        {
          title: '入库日期',
          key: 'create_time',
          align: 'center',
          minWidth: 145,
        },
        // create_time
        {
          title: '状态',
          align: 'center',
          minWidth: 85,
          render: (h, param) => {
            if (param.row.status == '近效期') {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#FF9C3F',
                      fontSize: '14px',
                    }, */
                    class: 'learDate',
                  },
                  '近效期'
                ),
              ])
            } else {
              return h('div', [
                h(
                  'span',
                  {
                    /* style: {
                      color: '#EF5656',
                      fontSize: '14px',
                    }, */
                    class: 'oldDate',
                  },
                  '过期'
                ),
              ])
            }
          },
        },
        // {
        //   title: '操作',
        //   align: 'center',
        //   fixed: 'right',
        //   render: (h, param) => {
        //     if (param.row.status == '近效期') {
        //       return h('div', [
        //         h(
        //           'span',
        //           {
        //             /* style: {
        //               color: '#389AFC',
        //               fontSize: '14px',
        //               cursor: 'pointer',
        //             }, */
        //             class: 'tableFont',
        //             on: {
        //               click: () => {
        //                 that.turnNoModel = true
        //                 if (param.row.factory_id) {
        //                   that.factory_id = param.row.factory_id
        //                 }
        //                 if (param.row.supplier_id) {
        //                   that.supplier_id = param.row.supplier_id
        //                 }
        //               },
        //             },
        //           },
        //           '禁用'
        //         ),
        //         h(
        //           'span',
        //           {
        //             style: {
        //               /* color: '#389AFC',
        //               fontSize: '14px',
        //               cursor: 'pointer', */
        //               marginLeft: '30px',
        //             },
        //             class: 'tableFont',
        //             on: {
        //               click: () => {
        //                 this.output()
        //               },
        //             },
        //           },
        //           '导出审批表'
        //         ),
        //       ])
        //     } else {
        //       return h('div', [
        //         h(
        //           'span',
        //           {
        //             /* style: {
        //               color: '#389AFC',
        //               fontSize: '14px',
        //               cursor: 'pointer',
        //             }, */
        //             class: 'tableFont',
        //             on: {
        //               click: () => {
        //                 that.turnNoModel = true
        //                 if (param.row.factory_id) {
        //                   that.factory_id = param.row.factory_id
        //                 }
        //                 if (param.row.supplier_id) {
        //                   that.supplier_id = param.row.supplier_id
        //                 }
        //               },
        //             },
        //           },
        //           '禁用'
        //         ),
        //       ])
        //     }
        //   },
        //   minWidth: 220,
        // },
      ],
      zhuceTableData: [
        {
          type: 1,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          productName: '冠脉雷帕霉素靶向洗脱支架系统',
          zhuceNo: '国械注准20143462100',
          time: '2020-09-09',
          day: '70',
        },
        {
          type: 2,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          productName: '冠脉雷帕霉素靶向洗脱支架系统',
          zhuceNo: '国械注准20143462100',
          time: '2020-09-09',
          day: '70',
        },
        {
          type: 1,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          productName: '冠脉雷帕霉素靶向洗脱支架系统',
          zhuceNo: '国械注准20143462100',
          time: '2020-09-09',
          day: '70',
        },
        {
          type: 1,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          productName: '冠脉雷帕霉素靶向洗脱支架系统',
          zhuceNo: '国械注准20143462100',
          time: '2020-09-09',
          day: '70',
        },
        {
          type: 1,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          productName: '冠脉雷帕霉素靶向洗脱支架系统',
          zhuceNo: '国械注准20143462100',
          time: '2020-09-09',
          day: '70',
        },
        {
          type: 1,
          no: 6993232,
          name: '上海微创医疗器械有限公司',
          productName: '冠脉雷帕霉素靶向洗脱支架系统',
          zhuceNo: '国械注准20143462100',
          time: '2020-09-09',
          day: '70',
        },
      ],
      NoticeInfo: {},
    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  mounted() {
    this.echartsFontSize()
    this.getMonthlyShop()
    this.getMonthlySales()
  },
  created() {
    this.getOrderList()
    this.getTableList()
    this.turnThis()
    this.isFirstLogin()
    this.AnnouncementManage()
    this.FileManage()
  },
  methods: {
    // 确认公告已读
    confirmStatus () {

    },
    // 公告列表
    AnnouncementManage() {
      this.$http.get(this.$api.AnnouncementManage,{title: ''},true).then(res => {
        console.log(res)
        this.noticeList = res.data
        this.noticeList.forEach(item => {
          item.create_time = item.create_time ? this.$moment(item.create_time * 1000).format('YYYY-MM-DD') : ''
        })
      })
    },
    // 公告列表
    FileManage() {
      this.$http.get(this.$api.FileManage,{title: ''},true).then(res => {
        console.log(res)
        this.fileList = res.data
        this.fileList.forEach(item => {
          item.create_time = item.create_time ? this.$moment(item.create_time * 1000).format('YYYY-MM-DD') : ''
        })
      })
    },
    // 下载文件
    downFile(item) {
       window.open(item.file_url)
    },
    // 查看公告信息
    lookInfo(item) {
      this.$http.get(this.$api.AnnouncementDetail,{announcement_detail_id: item.announcement_detail_id},true).then(res => {
        this.NoticeInfo = res.data
        this.NoticeInfo.content = this.NoticeInfo.content.replace(/\\/gi,'')
        let notice = document.getElementById('notice')
        notice.innerHTML = this.NoticeInfo.content
        this.noticeStatus = true
        // 调已读
        this.AnnouncementManage()
      })

    },
    // 导出预警信息
    Export() {
      
      this.$http.downFile(this.$api.systemWarningListExport,{warning_type: this.warningType},true).then(res => {
        let blob = new Blob([res.data], { type: 'application/x-xlsx'})
        const alink = document.createElement('a')
        alink.href =  URL.createObjectURL(blob)
        alink.download = `${this.ExportTilte}.xlsx`
        alink.click()
        
      })
    },
    changeListpage(e) {
      if (e) {
        this.changepage = e
      }
      this.getWarningItemList(this.no)
    },
    // 是否第一次登陆
    isFirstLogin() {
      if (this.userInfo.first_modify_pwd) {
        this.changePwdStat = true
      }
    },
    sure() {
      if (!this.postData.changePwd || !this.postData.oldPwd || !this.postData.surePwd) {
        this.$Message.warning('请填写完整后提交')
        return null
      }
      if (this.postData.changePwd === this.postData.oldPwd) {
        this.$Message.warning('新密码不能与原密码相同')
        return null
      }
      // let test = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/
      // if (!test.test(this.postData.changePwd)) {
      //   this.$Message.warning('您的密码必须为8-16位字符，其中包含数字、大写字母和小写字母')
      //   return null
      // }
      if (this.postData.changePwd !== this.postData.surePwd) {
        this.$Message.warning('修改密码和确认密码不一致！')
        return null
      }
      this.$http.get(this.$api.systemRsa).then(res => {
        let oldPasswd = this.$getRsaCode(res.data, this.postData.oldPwd)
        let newPassword = this.$getRsaCode(res.data, this.postData.surePwd)
        let data = {
          old_password: oldPasswd,
          new_password: newPassword,
        }
        this.$http.post(this.$api.permissionResetPassword, data, true).then(res => {
          this.$Message.success('修改密码成功')
          this.changePwdStat = false
          let newuserInfo = this.userInfo
          newuserInfo.first_modify_pwd = false
          this.$store.commit('setUserInfo', newuserInfo)
          this.postData = {}
        })
      })
    },
    /* 获取警告详细数据 */
    getWarningItemList(no) {
      this.no = no
      let data = {
        page: this.changepage,
        rows: 10,
        warning_type: no,
      }
      this.$http.get(this.$api.getWarningDetailList, data, true).then(res => {
        if (res.status) {
          if (no === 6) {
            // res.data.obj_time = res.data.obj_time ? this.$moment.unix(res.data.obj_time).format('YYYY-MM-DD') : ''
            for (const item of res.data) {
              item.end_time = item.end_time ? this.$moment.unix(item.end_time).format('YYYY-MM-DD') : ''
            }
            this.zhuceTableData = res.data
            this.Listtotal2 = res.total
          } else if (no === 8) {
            for (const item of res.data) {
              item.obj_name = item['factory_name'] || item['supplier_name'] || item['distributor_name']
              item.obj_time = item['business_end_date'] || item['business_end'] || item['effective_end_date'] || item['license_end_date'] || item['registration_date'] || item['filing_date'] || item['license_date']
              item.obj_id = item['factory_id'] || item['supplier_id'] || item['distributor_id']
              item.code = item['code'] || item['factory_num']
              // for (const k in item) {
              //   k === 'factory_name' ? (item.obj_name = item[k]) : null
              //   k === 'supplier_name' ? (item.obj_name = item[k]) : null
              //   k === 'business_end_date' ? (item.obj_time = item[k]) : null
              //   k === 'business_end' ? (item.obj_time = item[k]) : null
              //   k === 'effective_end_date' ? (item.obj_time = item[k]) : null
              //   k === 'license_end_date' ? (item.obj_time = item[k]) : null
              //   k === 'factory_id' ? (item.obj_id = item[k]) : null
              //   k === 'supplier_id' ? (item.obj_id = item[k]) : null
              // }
              item.production_date = item.production_date ? this.$moment.unix(item.production_date).format('YYYY-MM-DD') : ''
              item.valid_period = item.valid_period ? this.$moment.unix(item.valid_period).format('YYYY-MM-DD') : ''
              item.create_time = item.create_time ? this.$moment.unix(item.create_time).format('YYYY-MM-DD') : ''
              item.obj_time = item.obj_time ? this.$moment.unix(item.obj_time).format('YYYY-MM-DD') : ''
            }
            this.ProductValidityTableData = res.data
            this.Listtotal3 = res.total
          } else {
            for (const item of res.data) {
              item.obj_name = item['factory_name'] || item['supplier_name'] || item['distributor_name']
              item.obj_time = item['business_end_date'] || item['business_end'] || item['effective_end_date'] || item['license_end_date'] || item['registration_date'] || item['filing_date'] || item['license_date']
              item.obj_id = item['factory_id'] || item['supplier_id'] || item['distributor_id']
              item.code = item['code'] || item['factory_num']
              // for (const k in item) {
              //   k === 'factory_name' ? (item.obj_name = item[k]) : null
              //   k === 'supplier_name' ? (item.obj_name = item[k]) : null
              //   k === 'business_end_date' ? (item.obj_time = item[k]) : null
              //   k === 'business_end' ? (item.obj_time = item[k]) : null
              //   k === 'effective_end_date' ? (item.obj_time = item[k]) : null
              //   k === 'license_end_date' ? (item.obj_time = item[k]) : null
              //   k === 'factory_id' ? (item.obj_id = item[k]) : null
              //   k === 'supplier_id' ? (item.obj_id = item[k]) : null
              // }
              item.obj_time = item.obj_time ? this.$moment.unix(item.obj_time).format('YYYY-MM-DD') : ''
            }
            this.commonTableData = res.data
            this.Listtotal = res.total
          }
        }
      })
    },
    // 点击效期列表数据
    clickNum(item) {
      this.clickTableType = item.warningType
      this.title = item.warningType.substring(0, item.warningType.length - 5) + '近效期/过期列表'
      if (item.no && item.no != 6 && item.no != 8) {
        tableTitle = item.warningType.substring(0, item.warningType.length - 5) + '有效期'
        this.getWarningItemList(item.no)
        this.commonTableStatus = true
      } else if (item.no && item.no == 6) {
        this.getWarningItemList(item.no)
        this.zhuceTableStatus = true
      } else if (item.no && item.no == 8) {
        console.log('景来了')
        this.getWarningItemList(item.no)
        this.ProductValidityTablestatus = true
      } 
    },
    /* 获取订单统计, 待办事项 */
    getOrderList() {
      this.$http.get(this.$api.getOrderList).then(res => {
        if (res.status) {
          for (const k in res.data.order_statistics) {
            if (res.data.order_statistics.hasOwnProperty(k)) {
              const item = res.data.order_statistics[k]
              this.$set(this.orderList, k, item)
            }
          }
          let index = 0
          for (const k in res.data.backlog) {
            console.log(k)
            if (res.data.backlog.hasOwnProperty(k) && k !== 'usage') {
              const item = res.data.backlog[k]
              this.navList[index].num = item
              index++
            }
          }
        }
      })
    },
    /* 获取表格数据 */
    getTableList() {
      this.$http.get(this.$api.getTableList).then(res => {
        if (res.status) {
          this.listData = res.data
        }
      })
    },
    // 计算 echarts 字号
    echartsFontSize() {
      this.zoomLeft = (window.screen.width / 1920) * 20
      this.zoomRight = (window.screen.width / 1920) * 16
      // console.log(this.zoomLeft, this.zoomRight);
    },
    /* 获取每月采购统计 */
    getMonthlyShop() {
      this.$http.get(this.$api.getMonthlyShop).then(res => {
        if (res.status) {
          let amountArray = res.data.amountArray
          let dateArray = res.data.dateArray
          this.options1 = echarts.init(document.getElementById('option1'))
          /* 每月采购统计 */
          let option1 = {
            title: {
              text: '每月采购统计',
              left: 36,
              top: 22,
              textStyle: {
                fontSize: this.zoomLeft,
                fontWeight: 'normal',
                color: 'rgba(0, 0, 0, 1)',
              },
            },
            color: ['#7CAAFF'],
            legend: {
              data: ['采购额'],
              right: 33,
              top: 33,
              itemWidth: 30,
              itemHeight: 10,
              textStyle: {
                fontSize: this.zoomRight,
                fontWeight: 'normal',
                color: 'rgba(82, 91, 109, 1)',
              },
            },
            grid: {
              containLabel: true,
              left: 30,
              right: 30,
              top: 70,
              bottom: 0,
            },
            xAxis: {
              // 是否显示坐标轴刻度
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                rotate: 40,
                margin: 30,
                color: '#666666',
              },
              axisLine: {
                lineStyle: {
                  color: '#ddd',
                },
              },
              type: 'category',
              data: dateArray,
            },
            yAxis: {
              axisLabel: {
                color: '#666666',
                formatter: '￥{value}',
                margin: 8,
              },
              axisLine: {
                lineStyle: {
                  color: '#ddd',
                },
              },
              axisTick: {
                show: false,
              },
              type: 'value',
            },
            series: [
              {
                name: '采购额',
                data: amountArray,
                type: 'line',
              },
            ],
            tooltip: {
              trigger: 'axis',
              formatter(params) {
                let val = params[0].data
                if (!val || isNaN(val)) return `${params[0].axisValue}</br>采购额：￥0`
                var num = parseFloat(val)
                num = String(num.toFixed(2 || 0))
                var re = /(-?\d+)(\d{3})/
                while (re.test(num)) {
                  num = num.replace(re, '$1,$2')
                }
                return `${params[0].axisValue}</br>采购额：￥${num}`
              },
            },
          }
          this.options1.setOption(option1)
        }
      })
    },
    /* 获取每月销售统计 */
    getMonthlySales() {
      this.$http.get(this.$api.getMonthlySales).then(res => {
        if (res.status) {
          let amountArray = res.data.amountArray
          let dateArray = res.data.dateArray
          this.options2 = echarts.init(document.getElementById('option2'))
          /* 每月销售统计 */
          let option2 = {
            title: {
              text: '每月销售统计',
              left: 36,
              top: 22,
              textStyle: {
                fontSize: this.zoomLeft,
                fontWeight: 'normal',
                color: 'rgba(0, 0, 0, 1)',
              },
            },
            color: ['#7CAAFF'],
            legend: {
              data: ['销售额'],
              right: 33,
              top: 33,
              itemWidth: 30,
              itemHeight: 10,
              textStyle: {
                fontSize: this.zoomRight,
                fontWeight: 'normal',
                color: 'rgba(82, 91, 109, 1)',
              },
            },
            grid: {
              containLabel: true,
              left: 30,
              right: 30,
              top: 70,
              bottom: 0,
            },
            xAxis: {
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                rotate: 40,
                margin: 30,
                color: '#666666',
              },
              axisLine: {
                lineStyle: {
                  color: '#ddd',
                },
              },
              type: 'category',
              data: dateArray,
            },
            yAxis: {
              axisLabel: {
                color: '#666666',
                formatter: '￥{value}',
                margin: 8,
              },
              axisLine: {
                lineStyle: {
                  color: '#ddd',
                },
              },
              axisTick: {
                show: false,
              },
              type: 'value',
            },
            series: [
              {
                name: '销售额',
                data: amountArray,
                type: 'line',
              },
            ],
            tooltip: {
              trigger: 'axis',
              formatter(params) {
                let val = params[0].data
                if (!val || isNaN(val)) return `${params[0].axisValue}</br>销售额：￥0`
                var num = parseFloat(val)
                num = String(num.toFixed(2 || 0))
                var re = /(-?\d+)(\d{3})/
                while (re.test(num)) {
                  num = num.replace(re, '$1,$2')
                }
                return `${params[0].axisValue}</br>销售额：￥${num}`
              },
            },
          }
          this.options2.setOption(option2)
        }
      })
    },
    /* 查看代办事项 */
    goView(url) {
      this.$router.push(url)
    },
    // 将vue的this赋值给data()里的this
    turnThis() {
      that = this
    },
    // 禁用
    turnNo() {
      if (this.factory_id) {
        let subfactory_id = this.factory_id
        this.$http.put(this.$api.factoryManageStateChange, { subfactory_id }, false).then(res => {
          if (res.status) {
            this.getWarningItemList(this.no)
            this.getTableList()
            this.factory_id = 0
          }
        })
      }
      if (this.supplier_id) {
        this.getWarningItemList(this.no)
        let supplier_id = this.supplier_id
        this.$http.put(this.$api.changeSupplierStatus, { supplier_id }, false).then(res => {
          if (res.status) {
            this.getWarningItemList(this.no)
            this.getTableList()
            this.supplier_id = 0
          }
        })
      }
      if (this.review_id) {
        let review_id = this.review_id
        let status_code = -2
        let obj = { review_id, status_code }
        this.$http.post(this.$api.changeStatus, obj, false).then(res => {
          if (res.status) {
            this.getWarningItemList(this.no)
            this.getTableList()
            this.review_id = 0
            this.$Message.success('禁用成功')
          } else {
            this.getWarningItemList(this.no)
            this.getTableList()
            this.review_id = 0
            this.$Message.error('禁用失败')
          }
        })
        this.noStatus = false
      }
      this.turnNoModel = false
    },
    // 导出审批表
    output() {
      this.$Message.warning('功能建设中...')
    },
  },
  filters: {
    formatMoney(val, decimal, symbol) {
      if (!val || isNaN(val)) return '0'
      var num = parseFloat(val)
      num = String(num.toFixed(decimal || 0))
      var re = /(-?\d+)(\d{3})/
      while (re.test(num)) {
        num = num.replace(re, '$1,$2')
      }
      return symbol ? symbol + num : num
    },
  },
}
</script>

<style scoped lang="less">
/deep/.tableWarn {
  color: #f63939 !important;
  font-size: 14px;
  cursor: pointer;
}
/deep/.tableTitle {
  font-size: 14px;
  cursor: pointer;
}
/deep/.learDate {
  color: #ff9c3f;
  font-size: 14;
}
/deep/.oldDate {
  color: #ef5656;
  font-size: 14;
}
.mainPage {
  background: #f0f0f0 !important;
  padding-top: 10px;
  color: #000;
  height: 100%;
  overflow-y: auto !important;
  .listDiv {
    background: #fff;
    border-radius: 8px;
    padding: 20px 20px 30px 20px;
    .title {
      height: 28px;
      font-size: 20px;
      color: #333333;
      line-height: 28px;
      margin-bottom: 16px;
    }
    /deep/ .ivu-table-body {
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .echartDiv {
    margin-bottom: 25px;
    display: flex;
    .echart1 {
      margin-right: 26px;
    }
    .echartfl {
      flex: 1;
      background: #fff;
      height: 446px;
      border-radius: 8px;
      position: relative;
    }
  }
  .mainMid {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    ul {
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 330px;
        height: 171px;
        background: #ffffff;
        border-radius: 8px;
        margin-left: 24px;
        &:nth-child(6) {
          margin-top: 24px;
          margin-left: 0px;
        }
        &:nth-child(7) {
          margin-top: 24px;
          margin-left: 24px;
        }
        &:nth-child(8) {
          margin-top: 24px;
          margin-left: 24px;
        }
        &:nth-child(9) {
          margin-top: 24px;
          margin-left: 24px;
          visibility: hidden;
        }
        &:nth-child(10) {
          margin-top: 24px;
          margin-left: 24px;
          visibility: hidden;
        }
        .num {
          div:nth-child(1) {
            height: 30px;
            font-size: 22px;
            font-weight: 600;
            color: #333333;
            line-height: 30px;
            margin-bottom: 12px;
          }
          div:nth-child(2) {
            height: 25px;
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            line-height: 25px;
            color: #333333;
            span:nth-child(2) {
              color: #426cfc;
            }
          }
        }
        .liBtm {
          margin-top: 15px;
          text-align: right;
          span {
            display: inline-block;
            width: 113px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 20px;
            color: #fff;
            font-size: 16px;
          }
        }
        img {
          width: 63px;
          height: 63px;
          margin-right: 25px;
        }
        .initDiv {
          padding: 27px 23px 22px 36px;
        }
      }
      li:first-child {
        margin-left: 0;
      }
    }
    .title {
      height: 28px;
      font-size: 20px;
      color: #333333;
      line-height: 28px;
      margin-bottom: 19px;
    }
  }
  .mainTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 0;
    .item1 {
      background: url('../assets/images/topBg1.png') 100% 100%;
    }
    .item2 {
      margin: 0 20px;
      background: url('../assets/images/topBg2.png') 100% 100%;
    }
    .item3 {
      background: url('../assets/images/topBg4.png') 100% 100%;
      margin-right: 20px;
    }
    .item4 {
      background: url('../assets/images/topBg3.png') 100% 100%;
    }
    .item {
      width: 424px;
      height: 173px;
      float: left;
      color: #fff;
      border-radius: 10px;
      .init {
        margin: 33px 0 0 41px;
        div:nth-child(1) {
          height: 30px;
          font-size: 22px;
          font-weight: 600;
          line-height: 30px;
        }
        div:nth-child(2) {
          height: 25px;
          font-size: 18px;
          line-height: 25px;
          margin: 15px 0 11px 0;
        }
        div:nth-child(3) {
          height: 25px;
          font-size: 18px;
          line-height: 25px;
        }
      }
    }
  }
}

.changePwd {
  .item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    span {
      color: #000000;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      font-size: 16px;
    }
  }
}
.marginbot20 {
  margin-bottom: 20px;
}
.changepageList {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btncolor{
  background-color: #389afc;
  border:1px solid #389afc;
}
.positionTOPL{
  position: absolute;
  left: 250px;
  top: 5px;
  background-color: #389afc;
  border:1px solid #389afc;
}
    .title {
      height: 28px;
      font-size: 20px;
      color: #333333;
      line-height: 28px;
      margin-bottom: 19px;
    }
 .notice{
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .noticeitem{
       flex: 1;
       .noticeContent{
         width: 100%;
         height: 370px;
         padding: 20px 20px;
         background: #FFFFFF;
         border-radius: 8px;
         box-sizing: border-box;
         ul{
           width: 100%;
           height: 100%;
           box-sizing: border-box;
           overflow-y: auto;
           li{
              width: 100%;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #E9E9E9;
              padding: 15px 0px;
              cursor: pointer;
              .spot{
                display: inline-block;
                width: 5px;
                height:5px;
                border-radius: 50%;
                background: #CCCCCC;
              }
              .status{
                display: inline-block;
                width: 25px;
                height: 12px;
                font-size: 12px;
                margin: 0px 15px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .rightText{
                flex: 1;
                display: flex;
                justify-content: flex-end;
              }
              .info{
                color:#999999;
                font-size: 14px;
                margin-left: 30px;
              }
              p{
                color: #333333;
                font-size: 16px;
                max-width: 300px;
                white-space: nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                
              }
           }
         }
       }
    }
 }  
 .marginLeft20 {
  margin-left: 20px;
}
.noticeTitle {
  width: 100%;
  margin: 15px 0px;
  //    display: flex;
  //    align-items: center;
  height: auto;
  .sp1 {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
  }
  .sp2 {
    font-size: 16px;
    color: #333333;
  }
  .infoContent {
    width: 100%;
    height: 450px;
    overflow-y: auto;
    // p {
    //   font-size: 16px !important;
    //   color: #333333 !important;
    //   line-height: 40px !important;
    //   text-indent: 32px !important;
    // }
  }
}
.marginTop{
  margin-top: 50px;
}
.flexS {
  display: flex;
  align-items: center;
}
.editor {
  line-height: normal !important;
  height: 300px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
  content: '请输入视频地址:';
}

// .ql-snow .ql-picker.ql-size .ql-picker-label::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item::before {
//   content: '14px';
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
//   content: '10px';
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
//   content: '18px';
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
//   content: '32px';
// }

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
  content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
  content: '等宽字体';
}
.quill-editor {
    line-height: normal !important;
}
.ql-editor {
  color: #333333 !important;
 
}
/deep/ .ql-editor p{
   font-size: 16px !important;
}
    .top,.bottom{
        text-align: center;
    }
    .center{
        width: 300px;
        margin: 10px auto;
        overflow: hidden;
    }
    .center-left{
        float: left;
    }
    .center-right{
        float: right;
    }
.noticeImg{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
